<template>
<!--  <div class="flex-row wrapper-box">-->

    <div class="wrapper-left flex-column ">
      <div class="top-box">
        <h1>{{contentInfo.title}}</h1>
        <span><i class="el-icon-date"></i> {{contentInfo.createTime}}</span>
        <el-tag type="success m-tag" size="mini">{{contentInfo.type}}</el-tag>
      </div>
      <div v-html="contentInfo.content" v-highlight></div>
<!--            <directory-tree :mdContent="mdContent"></directory-tree>-->
    </div>
<!--    <div class="wrapper-right">-->
<!--      <directory-tree :mdContent="mdContent"></directory-tree>-->
<!--    </div>-->
<!--  </div>-->

</template>


<script>
  import {getProblemById} from "../../api/problem";
  import DirectoryTree from "./directoryTree.vue";
  import Clipboard from 'clipboard'
  // import marked from 'marked'
  export default {
    name: "PreviewPage",
    components:{DirectoryTree},
    data() {
      return {
        contentInfo: {},
        mdContent:''
      }
    },
    mounted() {
      getProblemById(this.$route.params.id).then(res => {
        this.contentInfo = res.result
        this.mdContent = res.result.content
        // this.contentInfo.content = marked(this.contentInfo.content)
        this.markdownToHtml(this.contentInfo)
        this.$nextTick(() => {
          //添加代码复制功能
          this.clipboard = new Clipboard(".copy-btn");
          this.clipboard.on("success", () => {
            this.$message({type: "success", message: "复制成功"});
          });
        });
      })
    }, methods: {
      markdownToHtml(article) {
        const MarkdownIt = require("markdown-it");
        const hljs = require("highlight.js");
        const md = new MarkdownIt({
          html: true,
          linkify: true,
          typographer: true,
          highlight: function (str, lang) {
            // 当前时间加随机数生成唯一的id标识
            const codeIndex = parseInt(Date.now());
            // 复制功能主要使用的是 clipboard.js
            let html = `<div class="copy-btn el-icon-document-copy iconfont icon-fuzhi" type="button" data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}"></div>`;
            const linesLength = str.split(/\n/).length - 1;
            // 生成行号
            let linesNum = '<span aria-hidden="true" class="line-numbers-rows">';
            for (let index = 0; index < linesLength; index++) {
              linesNum = linesNum + "<span></span>";
            }
            linesNum += "</span>";
            if (lang && hljs.getLanguage(lang)) {
              // highlight.js 高亮代码
              const preCode = hljs.highlight(lang, str, true).value;
              html = html + preCode;
              if (linesLength) {
                html += '<b class="name">' + lang + "</b>";
              }
              // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "<" 代替，不影响复制功能
              return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${str.replace(
                /<\/textarea>/g,
                "</textarea>"
              )}</textarea>`;
            }
          }
        });
        //将markdown替换为html标签
        article.content = md.render(article.content);
        console.log(article.content)
        this.contentInfo = article;
      },
    }
  }
</script>

<style lang="scss" scoped>

  /*.wrapper-box{*/
  /*  margin: 20px;*/
    .wrapper-left {
        margin: 20px;
      /*width: 75%;*/
      .top-box {
        margin-bottom: 20px;
        .m-tag {
          margin-left: 10px;
        }
      }
    }
    /*.wrapper-right {*/
    /* width: 20%;*/
    /*}*/
  /*}*/


  /*pre.code {*/
  /*  position: relative;*/
  /*  border-radius: 3px;*/
  /*  border: 1px solid #C3CCD0;*/
  /*  overflow: hidden;*/
  /*  padding-left: 60px!important;*/
  /*  code {*/
  /*    line-height: 30px!important;*/
  /*  }*/
  /*  ol.pre-numbering {*/
  /*    position: absolute;*/
  /*    top: 0;*/
  /*    left: 5px;*/
  /*    line-height: 30px;*/
  /*    padding: 16px 0;*/
  /*    list-style-type:none;*/
  /*    counter-reset:sectioncounter;*/
  /*    margin-bottom: 0;*/
  /*    li{*/
  /*      margin-top: 0!important;*/
  /*      &:before{*/
  /*        content:counter(sectioncounter) "";*/
  /*        counter-increment:sectioncounter;*/
  /*        display: inline-block;*/
  /*        width: 40px;*/
  /*        text-align: center;*/
  /*        border-right: solid 1px rgba(0, 0, 0, 0.53);*/
  /*      }*/
  /*    }*/
  /*  }*/
  /*  i.code-copy{*/
  /*    position: absolute;*/
  /*    top:0;*/
  /*    right: 0;*/
  /*    background-color: #464d5e;*/
  /*    padding: 3px;*/
  /*    margin: 3px 3px 0 0;*/
  /*    font-size: 11px;*/
  /*    border-radius: inherit;*/
  /*    color: #f1f1f1;*/
  /*    cursor: pointer;*/
  /*    display: none;*/
  /*  }*/
  /*  &:hover i.code-copy{*/
  /*    display: block;*/
  /*  }*/
  /*}*/

</style>

<style lang="scss">
  pre.hljs {
    padding: 12px 2px 12px 40px !important;
    border-radius: 5px !important;
    position: relative;
    font-size: 14px !important;
    line-height: 22px !important;
    overflow: hidden !important;

    &:hover .copy-btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    code {
      display: block !important;
      margin: 0 10px !important;
      overflow-x: auto !important;

      &::-webkit-scrollbar {
        z-index: 11;
        width: 6px;
      }

      &::-webkit-scrollbar:horizontal {
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        width: 6px;
        background: #666;
      }

      &::-webkit-scrollbar-corner,
      &::-webkit-scrollbar-track {
        background: #1e1e1e;
      }

      &::-webkit-scrollbar-track-piece {
        background: #1e1e1e;
        width: 6px;
      }
    }

    .line-numbers-rows {
      position: absolute;
      pointer-events: none;
      top: 12px;
      bottom: 12px;
      left: 0;
      font-size: 100%;
      width: 40px;
      text-align: center;
      letter-spacing: -1px;
      border-right: 1px solid rgba(0, 0, 0, 0.66);
      user-select: none;
      counter-reset: linenumber;

      span {
        pointer-events: none;
        display: block;
        counter-increment: linenumber;

        &:before {
          content: counter(linenumber);
          color: #999;
          display: block;
          text-align: center;
        }
      }
    }

    b.name {
      position: absolute;
      top: 7px;
      right: 45px;
      z-index: 10;
      color: #999;
      pointer-events: none;
    }

    .copy-btn {
      cursor: pointer;
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 10;
      color: #ccc;
      background-color: #525252;
      border-radius: 6px;
      display: none;
      font-size: 14px;
      width: 32px;
      height: 24px;
      outline: none;
    }
  }
</style>
